<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>
    <header>

    </header>
    <section>
        <div id="cen_position_refer">
            <div class="cen_position">
                <p>
                    <img src="img/26.jpg">
                </p>
                <div class="cen_type">
                    <div class="type_top">
                        <dl>
                            <dt>
                                    <img src="img/13.png">
                                </dt>
                            <dd>上衣</dd>
                        </dl>
                        <dl>
                            <dt>
                                    <img src="img/14.png">
                                </dt>
                            <dd>女鞋</dd>
                        </dl>
                        <dl>
                            <dt>
                                    <img src="img/15.png">
                                </dt>
                            <dd>裙子</dd>
                        </dl>
                        <dl>
                            <dt>
                                    <img src="img/16.png">
                                </dt>
                            <dd>男装</dd>
                        </dl>
                        <dl>
                            <dt>
                                    <img src="img/17.png">
                                </dt>
                            <dd>裤子</dd>
                        </dl>
                        <dl>
                            <dt>
                                    <img src="img/20.png">
                                </dt>
                            <dd>包包</dd>
                        </dl>
                        <dl>
                            <dt>
                                    <img src="img/19.png">
                                </dt>
                            <dd>快抢</dd>
                        </dl>
                        <dl>
                            <dt>
                                    <img src="img/20.png">
                                </dt>
                            <dd>包包</dd>
                        </dl>
                        <dl>
                            <dt>
                                    <img src="img/21.png">
                                </dt>
                            <dd>家居</dd>
                        </dl>
                        <dl>
                            <dt>
                                    <img src="img/22.png">
                                </dt>
                            <dd>内衣</dd>
                        </dl>
                        <dl>
                            <dt>
                                    <img src="img/23.png">
                                </dt>
                            <dd>鞋子</dd>
                        </dl>
                        <dl>
                            <dt>
                                    <img src="img/24.png">
                                </dt>
                            <dd>母婴</dd>
                        </dl>
                    </div>
                    <div class="type_bottom">
                        <ul>
                            <li>时尚套餐</li>
                            <li>百搭卫衣</li>
                            <li>T恤</li>
                            <li>短款外套</li>
                            <li>人气衬衫</li>
                            <li>宽松毛衣</li>
                            <li>连衣裙</li>
                            <li>休闲裤</li>
                            <li>牛仔裤</li>
                            <li>靴子</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="index_pubu_refer">

        </div>
    </section>
    <footer>

    </footer>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/xiding.js"></script>
    <script>
        $("header").load("./head.html", function() {})
        $("footer").load("./foot.html", function() {})

        // 给定图片固定宽度
        let dlWidth = 220;
        // 缝隙的大小
        let spaceSize = 24;
        // 定义一个数组，表示当前列的高度
        let arr = [0, 1200, 1200, 1200, 0];

        function createDl() {
            for (let i = 0; i < 39; i++) {
                let oDl = $("<dl>");
                $("#index_pubu_refer").append(oDl);
                oDl.html(
                    `	<dt>
                			<img src=imgs/${i}.jpg 
                			width:${dlWidth}px"
                			/ >
                			<p>
                				<span class="one"></span>
                				<span class="two">我是莫小曼</span>
                			</p>
                		</dt>
                		<dd>
                			<p class="top">清仓 款式以直播间为准福利款单鞋</p>
                			<div class="bott">
                				<span class="lef">￥99.99</span>
                				<p class="rig">
                					销量<span>1464</span>
                				</p>
                			</div>
                		</dd>`
                )

            }
        }
        // 渲染改变所有dl的left和top
        function changeDlLeftAndTop() {
            let oDls = document.querySelectorAll("#index_pubu_refer dl");
            for (let i = 0; i < oDls.length; i++) {
                let colums = i % 5; /**列数，从0开始**/
                let rows = parseInt(i / 5); /**行数，从0开始**/
                oDls[i].style.left = colums * (dlWidth + spaceSize) + "px";
                oDls[i].style.top = arr[colums] + "px";
                //offsetHeight计算出高度，要计算，必须保证dl已经显示（渲染）在页面上了
                arr[colums] += oDls[i].offsetHeight + spaceSize;
            }
            // 获取最大的高
            let maxHeight = arr[0];
            for (let i = 1; i < arr.length; i++) {
                if (arr[i] > maxHeight) {
                    maxHeight = arr[i];
                }
            }
            console.log(maxHeight);
            $("#index_pubu_refer").css({
                "height": maxHeight + "px"
            })
        }
        // 懒加载
        // function scroll() {
        //     let that = this;
        //     window.onscroll = function() {
        //         let _top = document.body.scrollTop || document.documentElement.scrollTop;
        //         if (_top > 400) {
        //             that.createDl();
        //         }
        //     }
        // }
        window.onload = function() {
            createDl()
            let oImgs = document.querySelectorAll("#index_pubu_refer dl dt");
            let myTimer = setInterval(function() {
                if (oImgs[oImgs.length - 1].offsetHeight > 0) {
                    changeDlLeftAndTop();
                    window.clearInterval(myTimer);
                }
            }, 10)
            scroll()
        }
        createDl()
    </script>
</body>

</html>